import { React, useEffect, useState } from 'react';
import { Mask, ImageUploader, Form, Input, Toast, NavBar, Button, Radio, DatePicker, Collapse, Space, TextArea, Avatar } from 'antd-mobile';
import { UnorderedListOutline, PayCircleOutline, SetOutline, FireFill } from 'antd-mobile-icons';
import '../css/overview.css';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import axios from 'axios';

const now = new Date();
const min = new Date('1900-01-01');

function Overview() {
  const [visible, setVisible] = useState(false);
  const [visible1, setVisible1] = useState(false);
  const [work_name, setWork_name] = useState('');
  const [work_end, setWork_end] = useState('');
  const [work_start, setWork_start] = useState('');
  const [work_content, setWork_content] = useState('');
  const [work_cate, setWork_cate] = useState('');
  const [id,setId]=useState('')
  const navigate = useNavigate();
  let time;
  let time1
  useEffect(() => {
    const basic = JSON.parse(localStorage.getItem('basicFact'));
    if (basic) {
      setWork_name(basic.work.work_name);
      setId(basic._id)
      setWork_end(basic.work.work_end);
      setWork_start(basic.work.work_start);
      setWork_content(basic.work.work_content);
      setWork_cate(basic.work.work_cate);
      time = new Date(basic.work.work_start);
      console.log(time);

      time1 = new Date(basic.work.work_end);
    }
  }, []);

  const back = () => {
    Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 1000,
    });
    navigate('/overview');
  };

  const Submit = () => {
    Toast.show({
      icon: 'loading',
      content: '加载中...',
      duration: 1000,
    });
    axios.post(`http://127.0.0.1:3000/updateobj?id=${id}&cate=work`,{work_name,work_content,work_start,work_end,work_cate}).then(
      res=>{
        console.log(res);
        
      }
    )
    console.log(work_cate,work_end,work_content,work_start,work_name);

  };

  return (
    <>
      <div className='top'>
        <NavBar onBack={back}>
          工作经历
        </NavBar>
      </div>

      <div>
        {
          <>

            <Form
              layout='horizontal'
              onFinish={(values) => {
                Toast.show({
                  icon: 'loading',
                  content: '加载中...',
                  duration: 1000,
                });
                localStorage.setItem('basicFact', JSON.stringify(values));
                // navigate('/overviewUpdate');
              }}
              footer={
                <Button onClick={() => Submit()} block type='submit' size='large' style={{ backgroundColor: '#ffc426' }}>
                  提交
                </Button>
              }>
              <Form.Item
                name='name'
                label='公司名称*'
                rules={[{ message: '姓名不能为空' }]}
              >
                <Input key={work_name} onChange={(e)=>setWork_name(e)} defaultValue={work_name} placeholder='请输入姓名' />
              </Form.Item>
              <Form.Item
                name='cate'
                label='你的职位*'
              >
                <Input key={work_cate} onChange={(e)=>setWork_cate(e)} defaultValue={work_cate} placeholder='请输入职位' />
              </Form.Item>
              <Form.Item
                name='work_start'
                label='入职时间'
                onClick={() => setVisible(true)}
              >
                {work_start ? dayjs(work_start).format('YYYY-MM-DD') : 'Please select'}

                <DatePicker
                  visible={visible}
                  max={now}
                  min={min}
                  defaultValue={time}
                  title='请选择日期'
                  onConfirm={(date) => {
                    setWork_start(date);
                    console.log(work_start);

                    setVisible(false);
                  }}
                  onClose={() => setVisible(false)}
                ></DatePicker>
              </Form.Item>
              <Form.Item
                name='work_end'
                label='离职时间'
                onClick={() => setVisible1(true)}
              >
                {work_end ? dayjs(work_end).format('YYYY-MM-DD') : 'Please select'}

                <DatePicker
                  visible={visible1}
                  max={now}
                  min={min}
                  defaultValue={time}
                  title='请选择日期'
                  onConfirm={(date) => {
                    setWork_end(date);
                    console.log(work_end);

                    setVisible1(false);
                  }}
                  onClose={() => setVisible1(false)}
                ></DatePicker>
              </Form.Item>
              <Form.Item
                name='content'
                label='工作内容*'
              >
                <Input key={work_content} onChange={(e)=>setWork_content(e)} defaultValue={work_content} placeholder='请输入职位' />
              </Form.Item>
            </Form>
          </>
        }

      </div>
    </>
  );
}

export default Overview;